<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="comun.xhtml">
        <ui:define name="body">

            <h:form id="formularioTarjetaVirtualID"  >
                <p:growl id="grow" showDetail="true" sticky="true" />
                <p:remoteCommand  id="remoteCommandTarjetaVirtualID"
                                   name="iniciarDatos"
                                  process="@this"
                                  update="formularioTarjetaVirtualID"
                                  actionListener="#{tarjetaVirtualControlador.iniciarDatos()}" />

                <p:panel rendered="#{!tarjetaVirtualDataManager.mostarMensaje}">
                    <center>
                        <br/>
                        <h:outputText style="color: #CCCCCC"
                            value="Descárgate la tarjeta virtual en tu celular,  comienza a recibir puntos por los consumos que realices en nuestros locales afiliados y se acreedor de descuentos, promociones, cortesías y más. 
                                   Mientras más puntos obtengas tú nivel podrá obtener mejores  descuentos y mayores beneficios."/>
                        <br/>
                        <br/>
                        <p:graphicImage value="#{tarjetaVirtualDataManager.qrCode}" cache="false" /> 
                        <br/>
                        <br/>

                        <h:outputText 
                            value="Se ha generado su tarjeta Virtual, y se la enviará a su cuenta de correo."/>
                        <br/>
                        <br/>
                        <p:commandLink id="botonEnviarMailID" value="Enviar" action="#{tarjetaVirtualControlador.enviarTarjeta}"
                                       style="font-size: 10px" process="@this" update="formularioTarjetaVirtualID"/>
                    </center>
                </p:panel>
                <p:panel rendered="#{tarjetaVirtualDataManager.mostarMensaje}" >
                    <center>
                        <br/>
                        <h:outputText 
                            value="Su Tarjeta está siendo generada, por favor espere...."/>
                        <br/>      
                     </center>   
                </p:panel>    
                
                
                <p:blockUI block="formularioTarjetaVirtualID" trigger="botonEnviarMailID remoteCommandTarjetaVirtualID"  >
                    Enviando Mail...<br /> 
                </p:blockUI>

            </h:form>

        </ui:define>
    </ui:composition> 
</html>

